<template>
  <div>
    <div :id="chartsId" :style="{width: '900px', height: '500px'}" class="my-chart"></div>
  </div>
</template>

<script>
export default {
  props: ['chartsId','data'],
  data(){
      return {}
  },
  mounted(){
      this.desc()
  },
  watch: {
    data(){
			  let self = this;
        console.log(this.data);
        let name1 = this.data[0];
				let name2 = this.data[1];
        let myChart = this.$echarts.init(document.getElementById(this.chartsId));
        myChart.setOption({
            title:{
                text: name1 + '_' + name2 + '非价格优惠百分比'
						},
            series: [
                {
                  data:[
                        {value:self.data[6], name:'礼包'},
                        {value:self.data[5], name:'金融政策'},
                        {value:self.data[7], name:'置换政策'},
                        {value:self.data[4], name:'保养政策'},
                        {value:self.data[2], name:'补贴政策'},
                        {value:self.data[1], name:'保险、税费政策'}
                    ],
                }
            ]
        })
    }  
  },
  methods: {
      desc(){
          let myChart = this.$echarts.init(document.getElementById(this.chartsId));
          myChart.setOption({
            title : {
                text: '北京非价格优惠百分比',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                left: 'center',
                bottom: 'bottom',
                data: ['礼包','金融政策','置换政策','保养政策','补贴政策', '保险、税费政策']
            },
            series : [
                {
                    name: '礼包政策分类',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'礼包'},
                        {value:310, name:'金融政策'},
                        {value:234, name:'置换政策'},
                        {value:135, name:'保养政策'},
                        {value:1548, name:'补贴政策'},
                        {value:548, name:'保险、税费政策'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })
      }
  }
}
</script>
